<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="BrowserDetect.js"></script>
    <style>
       *{
            margin:0 auto;
            padding: 0;
        }
.guidbox{
    position: fixed;
    top:0;
    width: 100%;
    height: 50px;
   background-image: url("headerbg.png");
}
#guid{
    width: 1000px;
    height: 50px;

}
#guid>img{
    display: block;
    float: left;
    margin-left: 30px;
}
        #text{
            height: 20px;
            width: 110px;
            position: absolute;
            top:90px;
            font-size: 18px;
            text-align: center;
            font-weight: bold;
            display: none;
        }
        .logo{
           display: block;
            height: 50px;
            width: 210px;
            float: left;
            font-size: 40px;
            color: white;
            line-height: 50px;
            font-style: italic;
            font-weight: bold;
        }
        #backbut{
            width: 50px;
            height:50px;
            position: fixed;
            border: 1px solid black;
            left: 0;
            bottom: 20px;
            text-align: center;
            background-color: black;
            opacity: 0.7;
            color:white;
            display: none;
        }
    </style>
</head>
<body>
<div class="guidbox">
  <div id="guid">
      <span class="logo">小黑科技</span>
      <img src="首页2.png" >
      <img src="产品服务2.png" >
      <img src="解决方案2.png" >
      <img src="案例2.png" >
      <img src="新闻2.png" >
      <img src="历史2.png" >
      <span id="text"></span>
  </div>
</div>
<div id="backbut">︿<br/><span style="font-size: 12px;">回到顶部</span></div>
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        var guid= document.getElementById("guid");
        var aImg = guid.getElementsByTagName("img");
        var text=document.getElementById('text');
        var aWidth = [];
        var i = 0;
        //保存原宽度, 并设置当前宽度
        for (i = 0; i < aImg.length; i++) {
            aWidth.push(aImg[i].offsetWidth);
            aImg[i].width = parseInt(aImg[i].offsetWidth / 2);
        }

       document.onmousemove = function (e) {
            var e = e || window.event;
            for (i = 0; i < aImg.length; i++) {
                var a = e.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
                var b = e.clientY - aImg[i].offsetHeight / 2;
                var iScale = 1 - Math.sqrt(a * a + b * b) / 200;
                if (iScale < 0.5){ iScale = 0.5;}
                aImg[i].width = aWidth[i] * iScale;
            }
        }

        //文字提示
        var str=['首页','产品服务','解决方案','案例展示','新闻中心','关于小黑科技'];
        for(i =0; i < aImg.length; i++){
            aImg[i].n=i;
            aImg[i].onmousemove=function(e){
                var e = e || window.event;
                text.style.left=this.offsetLeft+this.offsetWidth / 2-55+'px';
                text.style.display='block';
                text.innerHTML=str[this.n];
                this.onmouseout=function(e){
                  var e = e || window.event;
                  text.style.display='none';
                }
            }
        }
    }

    //回到顶部
var backbut=document.getElementById('backbut');
window.onscroll=scrollmove;
function scrollmove(){
    var  scrotop=document.documentElement.scrollTop||document.body.scrollTop;
    if(scrotop>=300){
        backbut.style.display='block';
    }else{
        backbut.style.display='none';
    }
}
var butT;
var scroLL;
if(BrowserDetect.browser=="Firefox"||BrowserDetect.browser=="Internet Explorer"||BrowserDetect.version=='11'){
    scroLL=document.documentElement;
    }else{
    scroLL=document.body;
}
backbut.onclick=function(){
    window.onscroll=null;
    starmove(0,scroLL);
    console.log(scroLL.scrollTop);
}
function starmove(target,obj){
    clearInterval(obj.times);
    obj.times=setInterval(function(){
            var speed=(target-obj.scrollTop)/10;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(obj.scrollTop==target){
                clearInterval(obj.times);
                window.onscroll=scrollmove;
            }else{
                obj.scrollTop=obj.scrollTop+speed;
            }
     },30);
}
</script>